<template>
  <div style="height: 600px;overflow: scroll;">
    <BaseForm v-model="formDataModel" @close="$emit('callBack')" />
  </div>

</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import DrillExamSubjectApi from '/@/api/webPath/DrillExamSubjectApi.ts';
import { translate } from "/@/i18n";
import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";
import { useEnumList } from '~/src/utils/useEnumList';
import DrillInfoApi from '~/src/api/DrillInfoApi';
defineOptions({
  name: 'DrillExamSubjectEdit',
})

const drillList = ref([])

onBeforeMount(async () => {
  const res = await DrillInfoApi.getPageData({ _size: 999, _current: 1 })
  if (res) {
    const { data: { records: data } } = res
    console.log("drill list data", data)
    drillList.value = data.map(x => ({ value: x.id, label: x.drillName }))
  }
})


const props = defineProps({
  modelValue: {

  }
})
const emit = defineEmits(['fetch-data', 'callBack'])

const formRef = ref<FormInstance>();
const title = ref<string>('');
const subjectTypeList = useEnumList("ExamSubjectType")
const examDifficultyTypeList = useEnumList("ExamDifficultyType")
const dialogFormVisible = ref<boolean>(false);



const formDataModel = ref({
  columnCount: 1,
  expandLimit: 6,
  autoFit: false,
  columnWidth: '300px',
  labelPosition: 'right',
  labelWidth: '100px',
  modelData: {},  //表单参数值 初始化
  callback: async (any: object) => {  //表单执行成功后回调
    //完成数据提交
    const { message } = await DrillExamSubjectApi.save(any)
    $baseMessage(message, 'success', 'vab-hey-message-success');
    dialogFormVisible.value = false


    //事件及数据推送到上一层父类
    emit('callBack', any); //把表单数据推送到上一层
  },
  items: [  //表单item数据初始化
    {
      label: "活动名称",
      field: "drillId",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      additionalParamKey: "drillId",
      options: drillList,

      placeholder: "请输入",

      rule: [
        {
          required: true,
          trigger: 'blur',
          message: '请选择活动'
        },
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
      ]

    },
    {
      label: "题目类型",
      field: "subjectType",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: subjectTypeList,

      placeholder: "请输入",

      rule: [
        {
          required: true,
          trigger: 'blur',
          message: '请选择题目类型'
        },
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
      ]

    },
    {
      label: "是否必考",
      field: "mandatory",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      // options: subjectTypeList,
      options: [
        {
          value: '否',
          label: "否"
        },
        {
          value: '是',
          label: "是"
        },
      ],

      placeholder: "请输入",

      rule: [
          {
            required: true,
            message: '请选择是否必考',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            validator: (rule: any, value: any, callback: any) => {  //绑定验证
              callback();
            },
          },
      ]

    },
    // {
    //   label: "试题难度",
    //   field: "subjectDifficulty",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
    //   options: examDifficultyTypeList,

    //   placeholder: "请输入",

    //   rule: {
    //     trigger: 'blur',
    //     validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //       callback();
    //     },
    //   },

    // },
    {
      label: "题目内容",
      field: "subjectContent",
      clearable: true,
      type: FORM_FIELD_TYPE.TEXTAREA,

      placeholder: "请输入",

      rule: [
          {
            required: true,
            message: '请输入题目类型',
            trigger: 'blur'
          },
          {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
      ]

    },
    {
      label: "选项A",
      field: "optionA",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "选项B",
      field: "optionB",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "选项C",
      field: "optionC",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "选项D",
      field: "optionD",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "选项E",
      field: "optionE",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "选项F",
      field: "optionF",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "正确答案",
      field: "answer",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "备选1",
      field: "spareOne",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "备选2",
      field: "spareTwo",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "备选3",
      field: "spareThree",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "备选4",
      field: "spareFour",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    // {
    //   label: "创建人",
    //   field: "creator",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.INPUT,

    //   placeholder: "请输入",

    //   rule: {
    //     trigger: 'blur',
    //     validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //       callback();
    //     },
    //   },

    // },
    // {
    //   label: "修改人",
    //   field: "reviser",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.INPUT,

    //   placeholder: "请输入",

    //   rule: {
    //     trigger: 'blur',
    //     validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //       callback();
    //     },
    //   },

    // },
    // {
    //   label: "排序",
    //   field: "sort",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.INPUT,

    //   placeholder: "请输入",

    //   rule: {
    //     trigger: 'blur',
    //     validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //       callback();
    //     },
    //   },

    // },

  ],
})






//页面数据加载
onMounted(async () => {

  //初始化数据model
  if (props.modelValue.query) { //跳转过来时候有参数
    if (props.modelValue.query.drillExamSubjectId) {  //id存在则为编辑，加载网络数据，如上级页面带参数手动覆盖

      const { data } = await DrillExamSubjectApi.getDetail({
        drillExamSubjectId: props.modelValue.query.drillExamSubjectId   //从路由中获取参数
      })
      formDataModel.value.modelData = data;
    } else {
      //新增时候则用父类页面传参默认填充可根据业务修改
      for (const key in props.modelValue.query) {
        formDataModel.value.modelData[key] = props.modelValue.query[key]
      }
    }
  }
})


//方法暴露区域  todo
defineExpose({

})

</script>
